<template>
	<div class="page">
		<div class="logo">
			<img class="logo-img" src="../assets/logo.png" alt="" />

			<div class="right-ic" @click="changeLanguage">
				<img src="../assets/100.png" alt="" />
				<span>{{$i18n.locale == 'zh' ? 'EN' : '中文'}}</span>
			</div>
		</div>
		<div class="top">
			<div class="title">{{$t('language.text9')}}</div>
		</div>


		<div class="list">
			<van-cell v-for="item in list" :key="item.id" :title="$i18n.locale == 'zh' ? item.cn_title: item.eu_title"
				is-link @click="goPage(item.id)" />
		</div>

	</div>
</template>

<script>
	import {
		getHelpPolicyList,
	} from '@/api/user';
	export default {
		name: 'Policy',
		data: function() {
			return {
				list: ''
			}
		},
		created() {
			this.getList()
		},
		mounted() {},

		methods: {
			getList() {
				getHelpPolicyList().then((res) => {
					const {
						list
					} = res.data
					this.list = list
				}).catch((err) => {
					console.log(err)
				})
			},
			goPage(id) {
				this.$router.push({
					path: 'policyDetails',
					query: {
						id
					}
				})
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					this.$cookies.set('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					this.$cookies.set('locale', 'zh')
				}
			}
		}
	};
</script>
<style type="text/css" lang="scss" scoped>
	.page {
		background-color: #F5F5FA;
	}

	.top {
		height: 216px;
		background: #060143;
	}

	.title {
		position: relative;
		z-index: 10;
		text-align: center;
		padding-top: 62px;
		color: #FFD308;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 42px;
		background-image:-webkit-linear-gradient(left, #F7C88F, #B78D5B);
		background-image: linear-gradient(left, #F7C88F, #B78D5B);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.list {
		margin: 60px 30px 0;
		position: relative;
		top: -100px;
		z-index: 999;

		.van-cell {
			font-size: 26px;
			padding: 36px 24px;
			line-height: 26px;
			color: #000000;
			border-radius: 15px;
			margin-top: 18px;

			.van-cell__left-icon,
			.van-cell__right-icon {
				font-size: 30px;
			}

			&::after {
				left: 0;
				border-bottom-color: #ccc;
			}
		}
	}
</style>